<template>
  <view class="work-record" @click="closeTooltip">
    <view class="line"><text></text></view>
    <view class="content">
      <view class="content_title">{{ title }}</view>
      <view class="content_item">
        <view class="name"
          >故障部件
          <text>*</text>
        </view>
        <view class="reasonContent">
          {{ partsName }}
		  <text v-if="partsName && obj.floorStandNames">({{ obj.floorStandNames.replaceAll(',','>') }})</text>
        </view>
        <!-- <dropdown :list="list" :value="obj.disposeType" @change="getData" @showDropDown="showDropDown"></dropdown> -->
      </view>
      <view class="content_item">
        <view class="name"
          >维修类型
          <text>*</text>
        </view>
        <view class="reasonContent">
          <view
            :class="obj.disposeType == item.value ? 'active' : ''"
            v-for="(item, index) in list"
            :key="index"
            @click="chooseItem(item)"
          >
            {{ item.label }}
          </view>
        </view>
        <!-- <dropdown :list="list" :value="obj.disposeType" @change="getData" @showDropDown="showDropDown"></dropdown> -->
      </view>
      <!-- <view class="content_item">
				<view class="name">电梯配件
					<text>*</text>
				</view>
				<repair-fitting @repairFit="getPart" :reset="restFlag" ref="repairFitting"></repair-fitting>
			</view> -->
      <!-- 备注 -->
      <view class="notice">
        <view style="display: flex; justify-content: space-between;">
          <view class="name">
            <view>维修处理过程-描述</view>
            <view>(选填)</view>
            <zb-tooltip placement="bottom" ref="tooltip_0">
                <image class="msg-img" src="@/static/images/index/q.png"></image>
                <view class="tipsContent" slot="content" style="text-align:left;">
                  <view class="">对电梯进行了什么维修操作，</view>
                  <view class="" style="color:#ffffff;">包含功能调整/清洁/润滑/更换配件等</view>
                </view>
            </zb-tooltip>
          </view>
          <view style="color: #0091FF; margin-left: 8rpx; font-size: 24rpx; font-weight: normal;" @click="showExample('record_desc')">示例</view>
        </view>
        <view class="area">
          <textarea
            v-model="obj.disposeDesc"
            :placeholder="formFocus === 'disposeDesc' ? '' : '示例：对厅门地坎进行了碎石清理'"
            placeholder-class="textare"
            style="font-size: 28rpx; height: 150rpx; width: 100%"
            maxlength="100"
            :always-embed="true"
            @blur="formFocus = ''"
            @focus="formFocus = 'disposeDesc'"
          />
          <view class="length">{{
            (obj.disposeDesc ? obj.disposeDesc.length : 0) + "/100"
          }}</view>
        </view>
      </view>
      <view class="imgBox">
        <view style="display: flex; justify-content: space-between;">
          <view class="name" style="display: flex;"
            >维修处理过程-图片/视频
            <text>*</text> 
            <zb-tooltip placement="bottom" ref="tooltip_1">
                <image class="msg-img" src="@/static/images/index/q.png"></image>
                <view class="tipsContent" slot="content" style="text-align:left;">
                    <view class="">对电梯部件进行操作调整的图片/视频</view>
                </view>
            </zb-tooltip>
          </view>
          <view style="color: #0091FF; margin-left: 8rpx; font-size: 24rpx; font-weight: normal;" @click="showExample('record_image')">示例</view>
        </view>
        <image-drag-sort
          tips="上传图片"
          :max="9"
          @changeList="changeImg"
          :list="obj.disposeImgUrl"
        >
        </image-drag-sort>
      </view>
    </view>

    <view class="save"
      ><button hover-class="none" @click="handleSave">提交</button></view
    >
  </view>
</template>

<script>
import ImageDragSort from '@/components/image-drag-sort/img-and-video.vue';
import dropdown from '@/components/dropdown/dropdown.vue';
import { mapState, mapActions } from 'vuex';
import { editCHeckRecord } from '@/apis/workOrder.js';
import { removeEmpty } from '@/utils/utils';
import RepairFitting from '@/components/repairFitting/repairFitting.vue';
import { update, setRecord, fetchDetail } from '@/apis/repair.js';
export default {
	props: {
		planId: {
			type: String,
		},
		restFlag: {
			type: String,
		},
		worksId: {
			// 故障部件 记录id
			type: String,
		},
		
	},
	components: {
		ImageDragSort,
		dropdown,
		RepairFitting,
		// unipopup
	},

	data() {
		return {
			obj: {
				disposeImgUrl: [],
				disposeDesc: '',
				disposeType: '',
				checkTypeId: '',
				partIds: '',
				checkContentId: '',
				partNames: '',
			},
			partsName: '', // 纯展示
			list: [
				{
					value: 1,
					label: '设备维修',
				},
				{
					value: 2,
					label: '更换配件',
				},
			],
			refresh: 0,
			isEdit: false,
			planOrderStatus: '', // 订单状态
			updateStatus: false,
			recordLog: '创建',
			title: '添加-维修记录',
			formFocus: ''
		};
	}, 
	created() {},
	computed: {
		...mapState('user', ['userinfo']),
	},
	methods: {
		checked(msg) {
			this.obj = { ...msg };
			this.obj.partIds = msg.partIds;
			this.partsName = msg.partsName; // 展示
			this.obj.disposeImgUrl = msg.disposeImgUrl;
			this.obj.partNames = msg.partNames.split('&amp;&amp;').join('&&');
			this.recordLog = '修改';
			this.title = '修改-维修记录';
		},
		setPart(msg) {
			// 新增维修记录 赋值
			this.partsName = msg.partsName; // 展示
			this.obj.partNames = msg.partsName.split('>').join('&&');
			this.obj.partIds = msg.partsIds;
			this.obj.floorStandIds = msg.floorStandIds;
			this.obj.floorStandNames = msg.floorStandNames;
		},
		chooseItem(item) {
			this.obj.disposeType = item.value;
		},
		showDropDown(res) {
			this.$refs.repairFitting.close();
		},
		// 获取设备类型
		getData(res) {
			this.obj.disposeType = res + 1;
		},
		getPart(res) {
			let partIds = res.ids || [];
			let partNames = res.names || [];
			this.obj.partIds = partIds.join(',');
			this.obj.partNames = partNames.join('&&');
		},
		changeImg(val) {
			console.log(val, 'val的值');
			this.obj.disposeImgUrl = val;
		},
		async handleSave() {
			uni.showLoading({
				title: '请稍后',
				mask: true,
			});
			await this.getDetail();
			uni.hideLoading();
			if (this.planOrderStatus === 4 && !this.updateStatus) {
				console.log('完成');
				this.$emit('hadDone');
			} else {
				const { disposeImgUrl, disposeDesc, disposeType, partNames } = this.obj;
				if (!disposeImgUrl.length || !partNames || !disposeType) {
					let str = '';
					if (!disposeType) {
						str = '请选择维修类型';
						uni.showToast({
							title: str,
							icon: 'none',
						});
						return false;
					}
					if (!disposeImgUrl.length) {
						str = '请上传部件维修图片或视频';
						uni.showToast({
							title: str,
							icon: 'none',
						});
						return false;
					}
					if (!partNames) {
						str = '请选择电梯配件';
						uni.showToast({
							title: str,
							icon: 'none',
						});
						return false;
					}
				} else {
					let parts = this.obj.partNames.split('&&');
					if (!parts[parts.length - 1]) {
						uni.showToast({
							title: '自定义配件内容不能为空',
							icon: 'none',
						});
						return;
					}
					uni.showLoading({
						title: '提交',
						mask: true,
					});
					console.log('更新部件', {
						...this.obj,
						planId: this.planId,
						recordDesc: '创建了记录',
						userId: this.userinfo.user_id,
					});
					let obj = JSON.parse(JSON.stringify(this.obj));
					uni.hideLoading();
					//  console.log('obj',obj)
					//  return
					update({
						...obj,
						planId: this.planId,
						userId: this.userinfo.user_id,
						worksId: this.worksId,
					}).then((res) => {
						// console.log(res);
						this.addMsg(res.data);
					});
				}
			}
		},
		addMsg(checkHistoryId) {
			uni.showLoading({
				title: '保存中',
				mask: true,
			});
			const params = {
				planId: this.planId,
				userId: this.userinfo.user_id,
				checkHistoryId: checkHistoryId,
				recordLog: this.recordLog,
				recordDataValue: this.obj,
			};
			editCHeckRecord(params).then((res) => {
				uni.hideLoading();
				this.obj = {
					disposeImgUrl: [],
					disposeDesc: '',
					disposeType: '',
					checkTypeId: '',
					partIds: '',
					checkContentId: '',
					partNames: '',
				};
				uni.showToast({
					title: '新增成功',
					icon: 'none',
				});
				this.$emit('update');
			});
		},
		getDetail() {
			return new Promise((resolve) => {
				fetchDetail({ planId: this.planId }).then((res) => {
					if (res) {
						console.log(res.data, '获取的值');
						this.planOrderStatus = res.data.status;
						this.updateStatus = res.data.updateStatus;
						resolve();
					}
				});
			});
		},
		showExample(type) {
			this.$emit('showExample', type);
		},
		closeTooltip() {
			// console.log(this.$refs['tooltip'],'this.$refs.tooltip');
			// this.$refs.tooltip.close();
			for (let index = 0; index < 2; index++) {
				if (this.$refs['tooltip_' + index]) {
					this.$refs['tooltip_' + index].close();
				}
			}
		}
	},
};
</script>
<style lang="scss" scoped>
.work-record {
  background-color: #fff;
  padding: 20rpx 40rpx 32rpx 40rpx;
  border-radius: 8rpx 8rpx 0rpx 0rpx;
  box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);

  .line {
    margin-bottom: 18rpx;
    display: flex;
    justify-content: center;

    text {
      width: 64rpx;
      height: 10rpx;
      background: #d8d8d8;
      border-radius: 6rpx;
    }
  }

  .content {
    .reasonContent {
      display: flex;
      flex-wrap: wrap;

      view {
        width: 30%;
        height: 48rpx;
        margin-bottom: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2rpx solid #cccccc;
        border-radius: 8rpx;
        margin-right: 18rpx;
      }

      .active {
        color: #0091ff;
        border-color: #0091ff;
      }
    }

    .content_title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 28rpx;
    }

    .content_item {
      margin-bottom: 16rpx;

      .name {
        font-size: 26rpx;
        margin-bottom: 16rpx;
        font-weight: bold;
        color: #333;
        border-left: 4rpx solid #0091ff;
        padding-left: 10rpx;

        text {
          color: #e54b4b;
        }
      }
    }

    .imgBox {
      // padding-bottom: 32rpx;

      // border-bottom: 2rpx solid #e9e9e9;
      .name {
        margin-bottom: 16rpx;
        font-size: 26rpx;
        font-weight: bold;
        color: #333;
        border-left: 4rpx solid #0091ff;
        padding-left: 10rpx;

        text {
          color: #e54b4b;
        }
      }
    }

    .notice {
      width: 100%;
      // padding-top: 32rpx;
      padding-bottom: 20rpx;

      // height: 200rpx;
      .name {
        display: flex;
        font-weight: bold;
        font-size: 26rpx;
        color: #333;
        margin-bottom: 16rpx;
        border-left: 4rpx solid #0091ff;
        padding-left: 10rpx;

        :nth-child(2) {
          font-weight: normal;
          color: #999999;
        }
      }

      .area {
        padding: 20rpx;
        border: 2rpx solid #e9e9e9;
      }
    }

    textarea {
      font-size: 28rpx;
    }

    .length {
      text-align: right;
      color: #ccc;
    }
  }

  .save {
    display: flex;
    justify-content: center;

    button {
      display: flex;
      width: 670rpx;
      height: 70rpx;
      // background: #0091ff;
      border-radius: 8rpx;
      // color: #fff;
      justify-content: center;
      align-items: center;
    }
  }
}
.msg-img{
  width: 28rpx;
  height: 28rpx;
  padding-top: 6rpx;
}
</style>
